<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" import="java.net.*"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>求职者注册</title>
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/static/common/plugin/bootstrap-3.3.5/css/bootstrap.min.css">
<link rel="shortcut icon" href="<%=request.getContextPath()%>/static/common/img/favicon.ico"/>
<script
	src="<%=request.getContextPath()%>/static/common/plugin/jquery.min.js"></script>
<script
	src="<%=request.getContextPath()%>/static/common/plugin/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script
	src="<%=request.getContextPath()%>/static/common/plugin/nice-validator-1.0.7/dist/jquery.validator.min.js"></script>
<script type="text/javascript" src="path/to/jquery-1.7.2.min.js"></script>	
<body >
<!-- 注册失败后的页面显示 -->
		<c:if test="${!empty requestScope.talent }">
			<div class="alert alert-danger alert-dismissible fade in" role="alert" style="text-align: center;">
		       <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
		       <strong>求职者注册失败！</strong>
			</div>
		</c:if>
	<center>
		<h1>求职者注册</h1>
	</center>
	<div class="container">
	<form  class="form-horizontal" role="form"
		action="<%=request.getContextPath()%>/TalentServlet?command=register" method="post" onsubmit="return validate();">
		<div class="form-group">
			<div class="col-sm-10">
				<input type="text" class="form-control" name="code" data-rule="用户名： required; code;" data-rule-code="[/^1[3458]\d{9}$/, '不能为空']"
					placeholder="code" id="code" value="${talent.code }">
			</div>
		<span id="codeInfo" class="bg-danger text-muted"></span>
		</div>
		<div class="form-group">
			<div class="col-sm-10">
				<input type="password" class="form-control" name="password"
					placeholder="Password" id="pwd" value="${talent.password }"   data-rule="required; password"
					 data-rule-password="[/^1[3458]\d{9}$/, '密码规则错误']"
      
					>
			</div>
		<span id="pwdInfo" class="bg-danger text-muted"></span>
		</div>
		<div class="form-group">
			<div class="col-sm-10">
				<input type="text" class="form-control" name="name"
					placeholder="name" id="name"  value="${talent.name }" data-rule="required; name;">
			</div>
			<span id="nameInfo" class="bg-danger text-muted"></span>
		</div>
		<div class="form-group">
			<div class="col-sm-10">
				<input type="text" class="form-control" name="phone"
					placeholder="phone"  value="${talent.phone }" data-rule="required; phone"
					 data-rule-phone="[/^1[3458]\d{9}$/, '请检查手机号格式']">
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-10">
				<input type="email" class="form-control" name="email"
					placeholder="email"  value="${talent.email }" data-rule="required; email;">
			</div>
		</div>
		<div class="form-group">
			<div class="checkbox">
			  <label>
			    <input type="checkbox" name="hobby" value="编程">编程
			  </label>
			  <label>
			    <input type="checkbox" name="hobby" value="看书">看书
			  </label>
			  <label>
			    <input type="checkbox" name="hobby" value="旅游">旅游
			  </label>
			  
		  </div>
		</div>
	  <div class="form-group">
		  	 <select class="form-control" id="age" name="age" >
		  	 	<option value="">-请选择年龄-</option>
		  	 	<script>
		  	 		for (var i = 16; i <= 65; i++) {
		  	 			// 如果要在JS代码上写EL，这个JS代码就必须要写在JSP页面上并且EL还得使用引号，不能使用外部引入！
		  	 			var age = '${sessionScope.talent.age }';
		  	 			if (i == age) {
			  	 			document.write('<option selected="selected">' + i + '</option>');
		  	 			} else {
			  	 			document.write('<option>' + i + '</option>');
		  	 			}
		  	 		}
		  	 	</script>
		  	 </select>
		    <span id="ageInfo"></span>
		  </div>
		<div class="radio">
		  	<c:if test="${requestScope.talent.gender == 1 || empty requestScope.talent}">
			    <label>
			      <input type="radio" name="gender" value="1" checked="checked"> 男
			    </label>
			    <label>
			      <input type="radio" name="gender" value="2"> 女
			    </label> 
		  	</c:if>
		  	<c:if test="${requestScope.talent.gender == 2}">
			    <label>
			      <input type="radio" name="gender" value="1"> 男
			    </label>
			    <label>
			      <input type="radio" name="gender" value="2" checked="checked"> 女
			    </label>
		    </c:if>
		  </div>
		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-10">
				<button type="submit" class="btn btn-default">注册</button>
				 <input type="button" class="btn btn-primary" onclick="javascript:history.back();" value="返回"/>
			</div>
		</div>
	</form>
	</div>
	<script>
			/**
			 *  checkbox回显
			 */
			var hobby = '${sessionScope.talent.hobby}'; // 旅游|看书
			if (hobby && '${sessionScope.talent}') {
				var hobbies = hobby.split('|');
				var allHobbies = document.getElementsByName('hobby');
				/*
				for (var i = 0; i < hobbies.length; i++) {
					for (var j = 0; j < allHobbies.length; j++) {
						if (hobbies[i] == allHobbies[j].value) {
							allHobbies[j].checked = true;
						}
					}
				}
				*/
				
				$(":checkbox").val(hobbies);
			}
			
			/**
			 * 表单验证
			 */
			function validate() {
				var result = true;
				var code = document.getElementById("code");
				var pwd = document.getElementById("pwd");
				var name = document.getElementById("name");
				if(code.value == ''){
					document.getElementById("codeInfo").innerHTML="用户名不能为空";
					result = false;
				}else{
					document.getElementById("codeInfo").innerHTML="";
				}
				if(pwd.value == ''){
					document.getElementById("pwdInfo").innerHTML="密码不能为空";
					result = false;
				}else{
					document.getElementById("pwdInfo").innerHTML="";
				}
				if(name.value == ''){
					document.getElementById("nameInfo").innerHTML="用户名不能为空";
					result = false;
				}else{
					document.getElementById("nameInfo").innerHTML="";
				}
				
				return result;
			}
		</script>
</body>
</html>